<template>
  <v-page header-background="#ffffff" background="#f5f6fa" padding-top="24rpx">
    <template #header>
      <v-navbar title="投诉反馈" :border="false" />
      <view class="header-info">
        请选择投诉类型
      </view>
    </template>
    <template #default>
      <view class="complaint-block" @click="navigateToApply('DELIVERY')">
        <view class="complaint-content">
          <view class="main">
            <v-icon
              size="40rpx"
              src="@/static/icons/complaint-type-select-delivery.svg"
            />
            <view class="title">
              发货问题
            </view>
          </view>
          <view class="sub">
            超时未发货/少发货/错发货/虚假发货
          </view>
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999999" />
      </view>
      <view class="complaint-block" @click="navigateToApply('PRODUCT')">
        <view class="complaint-content">
          <view class="main">
            <v-icon
              size="40rpx"
              src="@/static/icons/complaint-type-select-product.svg"
            />
            <view class="title">
              商品问题
            </view>
          </view>
          <view class="sub">
            描述不符/商品破损/质量问题等
          </view>
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999999" />
      </view>
      <view
        class="complaint-block"
        @click="navigateToApply('CUSTOMER_SERVICE')"
      >
        <view class="complaint-content">
          <view class="main">
            <v-icon
              size="40rpx"
              src="@/static/icons/complaint-type-select-service.svg"
            />
            <view class="title">
              客服问题
            </view>
          </view>
          <view class="sub">
            客服不回复/客服不处理/态度异常等
          </view>
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999999" />
      </view>
      <view class="complaint-block" @click="navigateToApply('OTHER')">
        <view class="complaint-content">
          <view class="main">
            <v-icon
              size="40rpx"
              src="@/static/icons/complaint-type-select-others.svg"
            />
            <view class="title">
              其他问题
            </view>
          </view>
          <view class="sub">
            {{ `${platform}举报/小程序体验等` }}
          </view>
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999999" />
      </view>
      <view class="my-complaint-link" @click="navigateToComplaintList">
        <view class="link-text">
          查看我的服务进度
        </view>
        <wd-icon name="arrow-right" size="26rpx" color="#666666" />
      </view>
    </template>
  </v-page>
</template>

<script setup lang="ts">
const platform = computed(() => $api._config.platform);

const navigateToApply = (type: string) => {
  uni.redirectTo({ url: `/pages/complaint/complaint-apply?type=${type}` });
};

const navigateToComplaintList = () => {
  uni.navigateTo({ url: '/pages/complaint/complaint-list' });
};
</script>

<style lang="scss" scoped>
.header-info {
  line-height: 60rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
}
.complaint-block {
  height: 132rpx;
  box-sizing: border-box;
  margin: 0 24rpx 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  .complaint-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 16rpx;
    .main {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
    .sub {
      color: #999999;
      font-weight: 300;
    }
  }
}
.my-complaint-link {
  margin: 0 auto 24rpx;
  height: 60rpx;
  width: fit-content;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
  .link-text {
    color: #666666;
  }
}
</style>
